<template>
  <div class="app-container">
    <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" />
    <!-- <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table> -->
  </div>
</template>

<script>
import { reqImportEmployee } from '@/api/employees'
import router from '@/router'
// import user from '@/store/modules/user'
// import TestComp from './components/test-comp.vue'
export default {
  name: 'Import',
  // components: { TestComp },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  computed: {
    type() {
      return this.$route.query.type
    }
  },
  methods: {
    // 处理日期
    formatExcelDate(numb, format) {
      const time = new Date((numb) * 24 * 3600000 + 1) // 毫秒
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + (month < 10 ? '0' + month : month) + format + (date < 10 ? '0' + date : date)
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    },
    // 上传前 - 做校验
    beforeUpload(file) {
      // 文件大小 是否小于1兆
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // 小于1兆 返回了true
        return true
      }

      // 大于1兆 错误提示信息
      this.$message({
        // message: 'Please do not upload files larger than 1m in size.',
        message: '请上传小于1兆的文件',
        type: 'warning'
      })
      // 返回false
      return false
    },
    // 上传成功 能够拿到我们excel数据
    async handleSuccess({ results, header }) {
      if (this.type === 'user') {
        // console.log({ results, header })
        this.tableData = results
        this.tableHeader = header
        // 准备数据，对应的英文
        const userRelations = {
          '入职日期': 'timeOfEntry',
          '手机号': 'mobile',
          '姓名': 'username',
          '转正日期': 'correctionTime',
          '工号': 'workNumber'
        }
        // 用来存储以下数据
        const data = []
        // results是excel里的数据
        // 通过遍历得到的item是数据里的每一项
        results.forEach(item => {
          // console.log(item)
          // 准备一个空对象
          // 用来被data数组包裹符合数据结构
          const userInfo = {}
          // 通过for in遍历数组
          // 得到键
          // 通过for of遍历
          // 得到值
          for (const key in item) {
            const englishKey = userRelations[key]
            // userRelations[key]得到英文的键值对
            if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
              userInfo[englishKey] = this.formatExcelDate(item[key], '-')
            } else {
              userInfo[englishKey] = item[key]
            }
          }
          // 累加到data数组中
          data.push(userInfo)
          // console.log(data)
        })
        // 准备好数据后
        // 发起请求
        await reqImportEmployee(data)
        // 提示用户添加成功
        this.$message.success('批量导入员工成功')
      }
      // 回退到员工列表页面
      router.back()
    }
  }
}
</script>
<style scoped lang="scss">
.scroll-div {
  height: 300px;
  background-color: pink;
  // overflow: auto;
  ::v-deep {
    .my-scrollbar {
      height: 100%;
      overflow-x: hidden;
    }
    .el-scrollbar__thumb {
      background-color: gold;
    }
  }
}
</style>
